import {observable, action} from 'mobx';
import {message} from 'antd';
import * as API from '../../apis/timeline';
import $ from 'jquery';
import {WeaTools} from 'ecCom';
let Base64 = WeaTools.Base64;

export default class TimelineStore{
    @observable loading: boolean = false;
    @observable param: any= {};  //展板id
    @observable name: string= ''; 
    @observable htmlTemplate: any; 
    @observable hasData: boolean=true; 
    @observable maxHeight=0; 
    timeline:any;

    @action
    init=()=>{
        const vis: any = window['vis'];
        const moment: any = window['moment'];
        const template: any = window['template'];
        template.get=(source)=>{
            return template.compile(source, {
                filename: 'zengh'
            });
        }
        let container = document.getElementById('cube_timeline_container');
        moment.locale('zh-cn', {
            months: '一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月'.split('_'),
            monthsShort: '1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月'.split('_'),
            weekdays: '星期日_星期一_星期二_星期三_星期四_星期五_星期六'.split('_'),
            weekdaysShort: '周日_周一_周二_周三_周四_周五_周六'.split('_'),
            weekdaysMin: '日_一_二_三_四_五_六'.split('_'),
            longDateFormat: {
                LT: 'HH:mm',
                LTS: 'HH:mm:ss',
                L: 'YYYY-MM-DD',
                LL: 'YYYY年MM月DD日',
                LLL: 'YYYY年MM月DD日Ah点mm分',
                LLLL: 'YYYY年MM月DD日ddddAh点mm分',
                l: 'YYYY-M-D',
                ll: 'YYYY年M月D日',
                lll: 'YYYY年M月D日 HH:mm',
                llll: 'YYYY年M月D日dddd HH:mm'
            },
            meridiemParse: /凌晨|早上|上午|中午|下午|晚上/,
            meridiemHour: function (hour, meridiem) {
                if (hour === 12) {
                    hour = 0;
                }
                if (meridiem === '凌晨' || meridiem === '早上' ||
                    meridiem === '上午') {
                    return hour;
                } else if (meridiem === '下午' || meridiem === '晚上') {
                    return hour + 12;
                } else {
                    // '中午'
                    return hour >= 11 ? hour : hour + 12;
                }
            },
            meridiem: function (hour, minute, isLower) {
                const hm = hour * 100 + minute;
                if (hm < 600) {
                    return '凌晨';
                } else if (hm < 900) {
                    return '早上';
                } else if (hm < 1130) {
                    return '上午';
                } else if (hm < 1230) {
                    return '中午';
                } else if (hm < 1800) {
                    return '下午';
                } else {
                    return '晚上';
                }
            },
            calendar: {
                sameDay: '[今天]LT',
                nextDay: '[明天]LT',
                nextWeek: '[下]ddddLT',
                lastDay: '[昨天]LT',
                lastWeek: '[上]ddddLT',
                sameElse: 'L'
            },
            dayOfMonthOrdinalParse: /\d{1,2}(日|月|周)/,
            ordinal: function (number, period) {
                switch (period) {
                    case 'd':
                    case 'D':
                    case 'DDD':
                        return number + '日';
                    case 'M':
                        return number + '月';
                    case 'w':
                    case 'W':
                        return number + '周';
                    default:
                        return number;
                }
            },
            relativeTime: {
                future: '%s内',
                past: '%s前',
                s: '几秒',
                ss: '%d秒',
                m: '1分钟',
                mm: '%d分钟',
                h: '1小时',
                hh: '%d小时',
                d: '1天',
                dd: '%d天',
                M: '1个月',
                MM: '%d个月',
                y: '1年',
                yy: '%d年'
            },
            week: {
                // GB/T 7408-1994《数据元和交换格式·信息交换·日期和时间表示法》与ISO 8601:1988等效
                dow: 1, // Monday is the first day of the week.
                doy: 4  // The week that contains Jan 4th is the first week of the year.
            }
        })

        let options = {
            locales: {
              // create a new locale (text strings should be replaced with localized strings)
              mylocale: {
                current: 'zh-cn',
                time: 'time',
              }
            },
            // use the new locale
            locale: 'mylocale',
            verticalScroll:true,
            //height:document.body.clientHeight-8
        };

        this.loading = true;
        API.getDatas(this.param).then(({ error, status,name,htmlTemplate,dataInfo,css}) => {
            if (status == '1') {
                this.name=name;
                this.htmlTemplate=htmlTemplate;
                if(dataInfo&&dataInfo.data&&dataInfo.groups&&dataInfo.groups.length>0){
                    dataInfo.data=dataInfo.data.map(item=>{
                        return {...item,content:template(Base64.decode(htmlTemplate[item.flag].titletemplate),item),title:template(Base64.decode(htmlTemplate[item.flag].contenttemplate),item)}
                    });
                    dataInfo.groups=dataInfo.groups.map(item=>{
                        return {...item,content:template(Base64.decode(htmlTemplate[item.flag].titletemplate),item),title:template(Base64.decode(htmlTemplate[item.flag].contenttemplate),item)}
                    });
                    //样式代码块
                    var style:any = document.createElement("style");
                    style.type = "text/css";
                    try {
                        style.appendChild(document.createTextNode(Base64.decode(css)));
                    } catch (ex) {
                        style.styleSheet.cssText =Base64.decode(css);
                    }
                    document.getElementsByTagName("head")[0].appendChild(style);
                    //样式代码块

                    this.maxHeight=$('.cube_timeline').height();

                    this.timeline=new vis.Timeline(container,dataInfo.data,dataInfo.groups,options);
                    if(this.timeline.dom.background.offsetHeight>this.maxHeight){
                        this.timeline.options.height=this.maxHeight;
                        this.timeline.redraw();
                    }
                    setTimeout(()=>{
                        this.timeline._setScrollTop(0);
                    },500);
                }else{
                    this.hasData=false;
                }
            } else {
                message.error(error);
                throw error;
            }
            this.loading = false;
        })
    }
}